"use client"
import { useContext, useEffect, useRef, useState } from "react";
import DragegableView from "../..";
import { useDrag, useDrop } from "react-dnd"
import { useAppDispatch } from "@/store/client";
import { acceptTypes, reactDndTypes } from "@/utils/reactDnd/reactDnd";
import { useHoverPositionView } from "@/utils/reactDnd/useHoverPosition";
import { addNowData, setBoxData } from "@/store/client/modules/reactdndStore";
import { useNodeMap } from "@/store/client/modules/reactdndStore/useNode";
import StyleView from "../../../style";
import { Row } from "antd";
const DraggableRowView: React.FC<reactDndProps> = ({ data }) => {
    const { boxIndex } = useNodeMap()
    const { useHoverPosition, debouncedHoverEnd, isTop, isBottom, isMiddle, isNow } = useHoverPositionView()
    const refDrage = useRef<HTMLDivElement>(null);
    const refDrop = useRef<HTMLDivElement>(null);
    const dispatch = useAppDispatch()
    const [{ isDragging }, drage] = useDrag(() => ({
        type: reactDndTypes.ROW,
        item: {
            id: data.id,
            parentId: data.parentId,
            targetId: data?.targetId,
            type: reactDndTypes.ROW,
            children: []
        },
        collect: (monitor: any) => {
            return {
                isDragging: monitor.isDragging(),
            }
        },
        end: (item, monitor) => {
            debouncedHoverEnd()
        },
    }), [data.id])
    const [{ isOver, canDrop }, drop] = useDrop(() => ({
        accept: acceptTypes,
        drop: (item: any, monitor: any) => {
            if (monitor.didDrop()) return;
            // if (isMiddle(data)) {
            //     dispatch(setBoxData({ item, monitor, parentId: data.id }))
            // }
            return data;
        },
        hover: (item: any, monitor: any) => {
            if (!monitor.isOver({ shallow: true })) return; // 仅在最内层触发
            if (monitor.didDrop()) return;
            useHoverPosition(refDrop, monitor, item, data)
        },
        collect: (monitor: any) => ({
            isOver: monitor.isOver({ shallow: true }),
            canDrop: monitor.canDrop(),
        }),
    }), [data.id]);
    // 合并 drag 和 drop 到同一个节点上

    useEffect(() => {
        drage(refDrage);
        drop(refDrop);
    })
    const handleClick = (e: { stopPropagation: () => void; }) => {
        e.stopPropagation();
        dispatch(addNowData(data))
    }
    return (
        <div>
            {!data.targetId && <div ref={refDrage}>栅格</div>}
            {data.targetId && <div ref={refDrop} className=" p-2 ">
                {!isDragging && <div onClick={handleClick} className={`relative p-2 rounded  border  ${isNow(data) ? " w-full h-full   border-1 border-b-blue-300" : ''}`}>
                    <StyleView refDrage={refDrage} data={data} />
                    <Row  className={`min-h-20 `}>
                        {boxIndex[data.id]?.length !== 0 && boxIndex[data.id]?.map((node: any, index: any) => {
                            return <DragegableView key={node} id={node} />
                        })}
                    </Row>
                </div>}
            </div >}
        </div>
    )
}
export default DraggableRowView;